import React from 'react';
import { inject, observer} from 'mobx-react';
import { Route, withRouter, Switch } from 'react-router-dom';
import { RouteLayout  } from 'weaver-mobile-page';
import { Tools } from 'weaver-mobile';
import { toJS} from 'mobx';
import MemberData from './memberData'
import CrmData from './crmData'
import OtherMemberData from './otherMemberData'
import EchartsPie from '../../../public/eCharts_pie';
const getLabel = Tools.getLabel;

@inject('viewMeetingStore')
@withRouter
@observer
class MemberView extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
      };
    }
    
    componentDidMount() {
      const { getMemberCount } = this.props.viewMeetingStore;
      getMemberCount();
    }

    componentWillReceiveProps(nextProps) {
      const prePath = this.props.location.pathname;
      const curPath = nextProps.location.pathname;
      if (curPath && curPath !== prePath) {
        if(prePath.indexOf('otherMemberData') > -1 ){
          const { getMemberCount } = this.props.viewMeetingStore;
          getMemberCount();
        }
      }
    }

    componentWillUnmount () {
    }

    render() {
      const { memberDetailCount , othersremark , othermembers ,btns} = this.props.viewMeetingStore;
      return (
        <div className={btns&&btns.length===1&&btns[0]==='doViewLog'?"tabContentHeight2":'tabContentHeight'}>
        <div style={{height:'100%',overflowY:'auto'}} className={'member-index-contain'}>
          {memberDetailCount.allAttend&&<div className={'memberDesc'}>{getLabel(2207, '已确定参会人员总计')} <span>{memberDetailCount.attend+memberDetailCount.otherCount+memberDetailCount.crmAttend}</span>{getLabel(33423, '人')}，{getLabel(2208, '其中公司员工')} <span>{memberDetailCount.attend+memberDetailCount.otherCount}</span> {getLabel(33423, '人')}，{getLabel(2209, '外部人员')} <span>{memberDetailCount.crmAttend}</span> {getLabel(33423, '人')}</div>}
          {memberDetailCount&&toJS(memberDetailCount).allAttend>0&&
            <div>
            <EchartsPie count={toJS(memberDetailCount)} type={'hrm'} pieCallBack={this.pieHrmCallBack}/>
          </div>
          }
          {toJS(memberDetailCount).allCrmAttend>0&&
          <div>
            <EchartsPie count={toJS(memberDetailCount)} type={'crm'} pieCallBack={this.pieCrmCallBack}/>
          </div>
          }
          {
            othermembers&&<div className={'member-desc'}>
            <span className={'member-desc-title'} style={{marginTop: 6}} >{getLabel(2168, '其他人员')}</span>
            <span className={'member-desc-bottom'}>{othermembers}</span>
          </div>
          }

          {othersremark&&<div className={'member-desc'}>
            <span className={'member-desc-title'}>{getLabel(26408, '备注')}</span>
            <span className={'member-desc-bottom'} dangerouslySetInnerHTML={{__html: othersremark}}></span>
          </div>}
        </div>
          <Switch>
            <Route
              key="memberData"
              path="/calendar/detail/member/memberData"
              render={()=>(
                <RouteLayout>
                <div key="memberDataDiv" className="wm-route-layout wm-demo-route-layout-page">
                  <MemberData memberType={"1"} />
                </div>
                </RouteLayout>
              )}
            />
            <Route
              key="crmData"
              path="/calendar/detail/member/crmData"
              render={()=>(
                <RouteLayout>
                <div key="crmDataDiv" className="wm-route-layout wm-demo-route-layout-page">
                  <CrmData memberType={"2"} />
                </div>
                </RouteLayout>
              )}
            />
            <Route
              key="otherMemberData"
              path="/calendar/detail/member/otherMemberData"
              render={()=>(
                <RouteLayout>
                <div key="otherMemberDataDiv" className="wm-route-layout wm-demo-route-layout-page">
                  <OtherMemberData memberType={"1"} />
                </div>
                </RouteLayout>
              )}
            />
            <Route
              key="otherCrmData"
              path="/calendar/detail/member/otherCrmData"
              render={()=>(
                <RouteLayout>
                <div key="otherCrmDataDiv" className="wm-route-layout wm-demo-route-layout-page">
                  <OtherMemberData memberType={"2"} />
                </div>
                </RouteLayout>
              )}
            />
          </Switch>
        </div>
      )
    }

    pieHrmCallBack = (key)=>{
      const { history } = this.props;
      const { setState  } = this.props.viewMeetingStore;
      if(key === 0){
        history.push("/calendar/detail/member/memberData/allMember");this.setCommonProps(0,1)
      } else if(key === 1){
        history.push("/calendar/detail/member/memberData/attend");this.setCommonProps(1,1)
      } else if(key === 2){
        history.push("/calendar/detail/member/memberData/unAttend");this.setCommonProps(2,1)
      } else if(key === 3){
        history.push("/calendar/detail/member/memberData/unWrite");this.setCommonProps(3,1)
      } else if(key === 'otherHrm'){
        setState({memberType:1});
        history.push("/calendar/detail/member/otherMemberData")
      } 
    }

    pieCrmCallBack = (key)=>{
      const { history } = this.props;
      const { setState  } = this.props.viewMeetingStore;
      if(key === 0){
        history.push("/calendar/detail/member/crmData/allMember");this.setCommonProps(0,2)
      } else if(key === 1){
        history.push("/calendar/detail/member/crmData/attend");this.setCommonProps(1,2)
      } else if(key === 2){
        history.push("/calendar/detail/member/crmData/unAttend");this.setCommonProps(2,2)
      } else if(key === 3){
        history.push("/calendar/detail/member/crmData/unWrite");this.setCommonProps(3,2)
      } else if(key === 'otherCrm'){
        setState({memberType:2});
        history.push("/calendar/detail/member/otherCrmData")
      } 
    }

    setCommonProps = (memberPage,memberType)=>{
      const { setState  } = this.props.viewMeetingStore;
      setState({memberPage:memberPage,memberType:memberType})
      sessionStorage.setItem('meetingMemberNowTab',memberPage)
      sessionStorage.setItem('meetingMemberType',memberType)
    }

}

export default MemberView;